<template>
  <div>
    {{ checked }}
    foo:{{ foo }} defaultArg:{{ defaultArg }} | {{ countplus }}
    <button @click="delToCount($event)">点击del emit</button>
    <button ref="aButton" @click="add">ref</button>
    {{ propB }}
    {{ ts }}
    <atest1 :name.sync="ts" @open="open" />
    <div v-if="checked">请求成功</div>
    <div v-else>还没发送请求</div>
  </div>
</template>
 
<script lang="ts">
import {
  Component,
  Vue,
  Prop,
  Emit,
  Ref,
  Model,
  Inject,
  PropSync,
  ModelSync,
  Provide,
  Watch,
} from "vue-property-decorator";
import atest1 from "./test.vue";
@Component({
  components: { atest1 },
})
export default class DemoComponent extends Vue {
  private foo = "App Foo!";
  public ts: string = "default value";
  @Prop({ default: 0 }) readonly propA: number | undefined; // 只读props单个类型
  @Prop({ default: "default value" }) readonly propB!: string;
  @Prop([String, Boolean]) readonly propC: string | boolean | undefined; // 只读props多个类型
  // private count: number = this["$store"].state.count;
  // @Provide("12131") readonly foo1!: string;
  @Prop(Boolean) private defaultArg: string | undefined;

  @Emit("delemit") private delEmitClick(event: MouseEvent) {} // 父组件触发

  @Ref("aButton") readonly ref!: HTMLButtonElement; // 标签节点信息
  @Model("change", { type: Boolean }) checked!: boolean; // @Model @Prop 其实都是 props
  // model:{props:'a',event:'eve'} props:{a:{type:string}} this.$emit('eve')
  // v-model 根据不同的组件 导入不同的方法 本质上是 :value @input 在组件上面展示
  // 在原生input 显示不同的方法 比如下拉框 :value change input 等等
  // 用于判断接口是否成功
  @Model("change", { type: Boolean }) judge!: boolean; // readonly 设置只读
  @PropSync("name", { type: String }) syncedName!: string; // sync修饰符
  @ModelSync("checked", "change", { type: Boolean, default: false })
  readonly checkedValue!: boolean;
  // computed;
  get countplus() {
    return this.foo;
  }
  @Emit()
  addToCount(n: number) {
    // this.count += n;
  }
  @Watch("checked", { immediate: true, deep: true })
  onChecked(val: Boolean, oldVal: Boolean) {
    console.log(val, oldVal);
  }
  @Provide() foo2 = "foo"; // provide:{a:123} 提供value inject:['a']
  @Provide() foo3 = this; // @Inject() foo2!: string;
  // @Inject("bar") readonly bar!: string;
  created() {}

  mounted() {}

  beforeDestroy() {}
  public add() {
    // this.checked = !this.checked;
    fetch("http://localhost:3000/test")
      .then((res) => res.json())
      .then((res) => {
        this.checked = !this.checked;
        console.log(res);
      });
  }
  public open(event: MouseEvent) {
    console.log(event);
  }
  public delToCount(event: MouseEvent) {
    this.delEmitClick(event);
    this.count += 1; // countplus 会累加
  }
}
</script>
 
<style lang="less">
</style>
